<template>
  <div class="index-mine">
    <cube-scroll :options="scrollConf.options"
                 class="scroll-wrap"
                 ref="scrollMine"
    >
      <div class="scroll-box">
        <div class="title">说明与AQ</div>
        <div class="content">
          <h3>概况</h3>
          <p>
            此APP设计的最初目的是为了解决使用vue+webpack自动化构建并实时同步手机热更新调试而诞生。截止目前，Dcloud官方没有提供一套完整的vue+webpack+hbuilder实时开发调试的文章，只是零零散散有人去构建一些自己的项目，并不能很好地教会或者引导大量开发者使用该开发模式进行开发。本APP以构建流程为主，demo为辅，印证了vue+webpack+hbuilder实时调试以及打包的可行性，为开发者提供多开发种选择。
          </p>
          <p>本APP与其他APP不同，该APP并不是功能性APP，所以几乎没有展示内容的业务逻辑，你可以把它理解为DCLOUD的muiAPP，做UIdemo的展示，并且验证PLUS在vue+webpack构建方式下的各类使用情况</p>
          <h3>Q1：该APP的主要技术架构</h3>
          <p>vue + webpack + cube-ui + hbuilder</p>
          <h3>Q2：调试与使用方式？</h3>
          <p>
            保持手机与电脑同一网段，服务起起后，将hbuilder起始页设置为本地服务器:端口号/index.html如
            192.168.11.102:8080/[..文件夹(如果有的话)]/index.html，同步手机。也可编译打包之后直接在根目录下面配置manifest.json，设置起始页面为html/index.html，同步手机。不同的webpack配置入口可能会导致入口文件有所不同，不过差异不大。
          </p>
          <h3>Q3：该APP有什么特色？</h3>
          <p>
            该项目除去说明与AQ主要分为两个板块，UI和PLUS。UI是对cube-ui官网demo的仿造与实际实践，采用的是后编译，100%迁移以及额外的扩展，更多的自定义demo展示与结合APP的运用，更加符合一款APP的基础需求。PLUS主要是对5+SDK的的集成运用，板块不是很多，主要对APP常用的几个功能进行了展示，PLUS的运用大同小异，PLUS的展示主要是验证5+在vue中的使用。</p>
          <p>
            除了UI和PLUS之外，本APP还刻意围绕APP的常用功能进行了制作，比如索引页面、登陆与登出，登陆超时、广告弹出等等功能的基础实现原理，使得APP更加“高仿”。此外，对公共函数的封装、组件的封装、对公用代码mixin的使用等也体现了作者对APP的态度
          </p>
          <h3>Q4：webpack如何构建？</h3>
          <p>
            此项目中的webpack是仿造vue-cli的结构进行构建的，有自定义的修改以及配置项。多页面(MPA)页面的构建方式可以参照代码，单页面(SPA)的构建方式可以参照我的另一款APP
            <a
              href="https://github.com/wjsljc/vue-webpack-mint-for-hbuilder"
              target="_blank"
            >https://github.com/wjsljc/vue-webpack-mint-for-hbuilder
            </a>
            。不是很精通webpack的同学建议先去了解一下。
          </p>
          <h3>Q5：为什么不使用webpack4？</h3>
          <p>
            本产品最初采用webpack4.7进行开发。但最终使用了webpack使用了3.6，主要原因是很多开发者习惯用vue-cli进行项目的初始化构建，作者开发时vue-cli还处于3.6。截止目前为止，3.x依然是最稳定的版本之一。保持与当时的vue-cli生成的webpack版本一致，可以减少使用vue-cli开发者的配置修改。其次，作者开发时4.x除了官方维护的loader以外还有很多个人维护的loader没有兼容4.x版本，不利于个别情况的扩展。但这并非不能使用webpack4进行开发，如果您在看到这篇文章的时候4.x的各方生态以及处于稳定或者您只需用到基础的loader,，那么您完全可以使用webpack4代替，只需少许的修改即可。
          </p>
          <h3>Q6：多页面与单页面构建的区别</h3>
          <p>
            此APP采用了多页面(MPA)构建，页面由webview进行跳转。单页面构建主要以路由为主。MPA需要webpack配合遍历项目结构来获取每一个页面的入口文件，相对麻烦一点，而SPA只有一个。构建方式的不同也导致了开发过程中的很多不同体验，如单页面在调试上面占优，可以直接在网页上跳转，方便审查元素等。多页面在5+SDK为最佳体验等。其他的区别请百度MPA与SPA的区别</p>
          <h3>Q7：为什么不使用mui？</h3>
          <p>
            本示例使用了cube-ui。mui对vue开发来说并不是最优的选择，因为它主要还是以dom的形式存在。但并不影响您在开发过程中使用mui。
          </p>
          <h3>Q8：程序员也会饿肚子？</h3>
          <p>程序员也是人，如果该项目给您带来了工作上的参考或者启发，亦或者期待更多其他项目的诞生和该项目的继续维护，支持作者原创扫一扫或点击识别下方的二维码，为作者打赏1.0元吧！</p>
          <h2>点击或扫一扫下方这个二维码！</h2>
          <img src="../../../static/QR/zhifubao.png" alt="支持作者下一个原创" @click="pay('zhifubao')"/>
          <h2>扫一扫下方这个二维码！</h2>
          <div class="wx-bg" @click="pay('weixin')"></div>
          <!--<img src="../../../static/QR/weixin.png" alt="支持作者下一个原创" />-->
          <div class="row">
            <cube-button type="submit" @click="loginOut">退出登陆</cube-button>
          </div>
        </div>
      </div>
    </cube-scroll>
  </div>
</template>

<script type="text/ecmascript-6">
  import { webview } from 'assets/js/webview'
  import { indexMixin } from 'assets/js/mixins'
  import { MyLocalStorage, fire } from 'assets/js/utils'
  import { LOGIN_FLAG, AD_FLAG, SLIDER_FLAG, INDEX_ACTIVETAB } from 'assets/js/storageConst'

  export default {
    mixins: [indexMixin],
    data () {
      return {
        payWay: 'zhifubao'
      }
    },
    methods: {
      pay (way) {
        console.log("os " + JSON.stringify(plus.os))
        let self = this
        if (way === 'weixin') {
          self.payWay = 'weixin'
        } else {
          self.payWay = 'zhifubao'
        }
        if (this.payWay === 'zhifubao') {
          plus.runtime.openURL("HTTPS://QR.ALIPAY.COM/FKX03664BYOZSMEB9BOB31", function (err) {
            console.log('打开失败 ' + JSON.stringify(err))
            window.open("HTTPS://QR.ALIPAY.COM/FKX03664BYOZSMEB9BOB31")
          })
        } else {
          console.log('进入微信')
          plus.runtime.launchApplication({
            action: 'weixin://dl/'
          }, function () {
            console.log('错误')
          })
        }
      },
      loginOut () {
        console.log('登出')
        MyLocalStorage.Cache.remove(AD_FLAG)
        MyLocalStorage.Cache.remove(LOGIN_FLAG)
        webview.openView({
          url: `./login.html`,
          id: 'login',
          titleNView: false
        }, () => {
          this.$refs.scrollMine.scrollTo(0, 0, 200, 'bounce')
          this.$emit('loginOut')
          let indexPage = plus.webview.getLaunchWebview()
          fire(indexPage, 'resetScroll')
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~assets/css/variable.styl"
  .index-mine {
    height 100%
    .title {
      height 50px
      line-height 50px
      text-align center
      font-size $font-size-large-x
    }
    .content {
      width 95%
      margin 0 auto
      .row {
        line-height 30px
        margin-bottom 20px
        button {
          display block
          width 80%
          margin 0 auto
        }
      }
      img {
        width 100%
        margin 10px 0
      }
      .wx-bg {
        width 100%
        height 300px
        margin 10px 0
        background url("../../../static/QR/weixin.png") no-repeat
        background-size 100% 100%
      }
      h2 {
        text-align center
        font-weight bold
        line-height 40px
      }
      h3 {
        line-height 40px
        font-size $font-size-large
        font-weight bold
      }
      p {
        line-height 24px
        text-indent 2em
        word-break break-all
        padding 5px
        border-radius 5px
        background-color $color-dialog-background
      }
    }
  }
</style>
